<!-- input -->
<template>
  <header class="header">
    <input
      placeholder="Enter an activity.."
      id="name"
      v-model="list"
      @keyup.enter="bood"
    />
    <button @click="bood" class="nue">
      <svg
        width="50"
        height="50"
        viewBox="0 0 50 50"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="24"
          cy="26"
          r="20"
          fill="white"
          stroke="none"
          stroke-width="3"
        />
        <text
          x="48%"
          y="58%"
          text-anchor="middle"
          alignment-baseline="middle"
          fill="#25b99a"
          font-size="35"
        >
          +
        </text>
      </svg>
    </button>
  </header>
</template>
<script setup>
import { ref, defineEmits } from "vue";

const list = ref("");

// 声明事件
const emit = defineEmits(["bood"]);

// 触发事件
const bood = () => {
  if (!list.value.trim()) {
    return;
  }
  emit("bood", list.value);
  list.value = "";
};
</script>

<style>
.header {
  background-image: linear-gradient(to right, #25b899, #25b99a);
  height: 60px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 10px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#name {
  background-image: linear-gradient(to right, #51c7ae, #51c7ae);
  height: 40px;
  width: 100%;
  padding: 0 10px 0 10px;
  border-style: none;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
}

header input::-webkit-input-placeholder {
  color: white;
}

header input:-moz-input-placeholder {
  color: white;
}

header input::-moz-input-placeholder {
  color: white;
}

header input:-ms-input-placeholder {
  color: white;
}

.nue {
  display: inline-block;
  border: none;
  background: none;
  outline: none;
  cursor: pointer;
  padding: 0px;
}
</style>
